<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <title>登录</title>
<!--    <link rel="stylesheet" type="text/css" th:href="@{/css/layui.css}" />-->
    <script type="text/javascript" src="/js/layui.js"></script>
    <script type="text/javascript" src="/js/jquery/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/layui.css">

    <style type="text/css">
        .layui-container {
            padding: 0 15px;
        }

        #logintop {
            margin: 25px 0 45px;
            color: #1069a4;
        }

        #logincenter {
            background-color: #f5f5f5;
            border: 10px solid #f5f5f5;
            padding: 0 15px;
            margin: 0 -15px;
        }

        #logindiv {
            background-color: white;
            padding: 10px 40px;
        }

        #logincenter .layui-input-block {
            margin: 0px;
        }

        #logindiv form button {
            width: 47%;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="layui-row" id="logintop">
        <h1>ERP系统</h1>
    </div>
    <div class="layui-row" id="logincenter">
        <div class="layui-col-md8">
            <div class="layui-carousel" id="test1">
                <div carousel-item>
                    <div><img  th:src="@{/images/pc2.webp.jpg}" style="width: 100%;"></div>
                    <div><img  th:src="@{/images/pc2.webp.jpg}" style="width: 100%;"></div>
                    <div><img  th:src="@{/images/pc2.webp.jpg}" style="width: 100%;"></div>
                    <div><img  th:src="@{/images/pc2.webp.jpg}" style="width: 100%;"></div>
                    <div><img  th:src="@{/images/pc2.webp.jpg}" style="width: 100%;"></div>

                </div>
            </div>

        </div>
        <div class="layui-col-md4" id="logindiv">
            <form class="layui-form"  th:action="@{/admin/login11}" method="post">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px; padding: 0px 20px;">
                    <legend>用户登录</legend>
                </fieldset>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="text" name="username"   lay-verify="required" autocomplete="off" placeholder="登录名"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="password" name="password" lay-verify="required" autocomplete="off" placeholder="密码"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block" style="text-align: center;">
                        <input type="radio" name="roles" value="1" title="管理员" checked="">
                        <input type="radio" name="roles" value="2" title="用户">
<!--                        <input type="radio" name="role" value="3" title="管理员">-->
                    </div>
                </div>
<!--                <input class="verifyInput"  name="verifyInput" placeholder="请输入验证码" size="10"/>-->
<!--&lt;!&ndash;                验证码图片&ndash;&gt;-->
<!--&lt;!&ndash;                验证码：<input type="text" value="" name="verifyInput"  id="verifyInput" size="10"/>&nbsp;&ndash;&gt;-->
<!--                <img class="verifyCode" onclick="changeCode()" src="getVerifyCode">-->




                <div class="verCode">
                    验证码：<input type="text" value="" name="imageCode"  id="imageCode" size="10"/>&nbsp;
                    <img th:onclick="'loadImage()'"  th:title="换一张试试" name="randImage" id="randImage" src="getVerifyCode" width="70" height="30" border="1" align="absmiddle">

                </div>

<!--                验证码：<input type="text" name="captcha"/><img alt="验证码"   th:src="@{/admin/Captcha.jpg}" title="点击更换" id="captcha_img"/>-->
<!--                (看不清<a href="javascript:void(0)" onclick="javascript:refreshCaptcha()">换一张</a>)<br/>-->


<!--                    <div class="col-sm-2">-->
<!--                        <img src="/getCode" id="captchaPic" style="width:100px;height:40px;" class="mr-2" onclick="refresh()"/>-->
<!--                    </div>-->
<!--                </div>-->

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit="" lay-filter="login">登录</button>
                        <button type="button" class="layui-btn layui-btn-primary">注册</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--<script th:src="@{/js/layui.js}"></script>-->
<!--<script th:src="@{/js/layui.js}"></script>-->

<!--<script th:src="@{/js/jquery/jquery-3.5.1.min.js}"></script>-->
<!--<script src="/js/jquery/jquery-3.5.1.min.js"></script>-->
<!--<script src="/js/layui.js"></script>-->
<script>


    layui.use(['form', 'carousel', 'layer'], function(){

        var form = layui.form;
        form.render();

        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1',
            width: '100%' //设置容器宽度
            ,
            arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
            ,
            interval: 800
        });

        var rlt = '${rlt}';
        if (rlt == '0') {
            layer.msg('用户名或密码输入错误！', {icon: 2});
        }

    });


    // /*点击刷新验证码*/
    // function changeCode(){
    //
    //     var src = " getVerifyCode?"+new Date().getTime(); //加时间戳，防止浏览器利用缓存
    //     $('.verifyCode').attr("src",src);                  //jQuery写法
    // }

    // 加载验证码
    function loadImage(){
        document.getElementById("randImage").src="getVerifyCode?"+new Date().getTime(); //加时间戳，防止浏览器利用缓存
    }

    // function refreshCaptcha(){
    //     $("#captcha_img").attr("src","/Captcha.jpg?id=" + new Date() + Math.floor(Math.random()*24));
    // }

    function submitData(){
        // var content=$("#content").val();
        var imageCode=$("#imageCode").val();

        var articleId = document.getElementById("articleId").value;
        // if(content==null || content==""){
        //     alert("请输入评论内容！");
         if(imageCode==null || imageCode==""){
            alert("请填写验证码！");
        }else{

            $.post("/admin/login",{'imageCode':imageCode},function(result){
                if(result.success){
                    window.location.reload();
                    alert("验证成功！");
                }else{
                    alert(result.errorInfo);
                }
            },"json");
        }
    }

</script>
</body>
</html>